<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="button">有人想加你为好友</button>
<p id="text"></p>
</body>
<script>
  var titleInit = document.title;
  var isShine = true;
  var notificationOpen = false;
  
  setInterval(function() {
    var title = document.title;
    if (isShine&&notificationOpen) {
      if (/新/.test(title) == false) {
        document.title = '【你有新消息】';
      } else {
        document.title = '【　　　　　】';
      }
    } else {
      document.title = titleInit;
    }
  }, 500);
  
  window.onfocus = function() {
    isShine = false;
    notificationOpen = false;
  };
  window.onblur = function() {
    isShine = true;
  };

  if (window.Notification) {
    var button = document.getElementById('button'), text = document.getElementById('text');
  
    var popNotice = function() {
      if (Notification.permission == "granted") {
        notificationOpen=true;
        var notification = new Notification("Hi，帅哥：", {
          body: '可以加你为好友吗？',
          icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
        });
      
        notification.onclick = function() {
          notificationOpen=false;
          text.innerHTML = '张小姐已于' + new Date().toTimeString().split(' ')[0] + '加你为好友！';
          notification.close();
        };
      }
    };
  
    button.onclick = function() {
      if (Notification.permission == "granted") {
        popNotice();
      } else if (Notification.permission != "denied") {
        Notification.requestPermission(function (permission) {
          popNotice();
        });
      }
    };
  } else {
    alert('浏览器不支持Notification');
  }
</script>
</html>
